<template>
  <div class="order-info">
    <div class="pl24  pr24 pb24">
      <t-alert theme="warning"> 代理商“{{ info.user_name }}”未支付尾款¥{{ info.pay_produce - info.deposit_fee }}元，请联系代理商支付完成后，即可发货。 </t-alert>
    </div>

    <t-card title="订单信息" :bordered="false" class="detail-card">
      <t-descriptions :column="2">
        <t-descriptions-item label="订单编号">
          <span slot="content">{{ info.order_no }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="联系人">
          <span slot="content">{{ info.user_name }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="联系电话">
          <span slot="content">{{ info.user_phone }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="收货地址">
          <span slot="content">{{ info.user_address }}</span>
        </t-descriptions-item>
        <t-descriptions-item label="订单备注">
          <span slot="content">{{ info.user_remark ? info.user_remark : '无' }}</span>
        </t-descriptions-item>
      </t-descriptions>
    </t-card>
    <t-card title="代理商采购清单" :bordered="false" class="detail-card mt24">
      <t-table
        ref="table"
        rowKey="product_gid"
        :data="info.product"
        :columns="columns"
        :stripe="stripe"
        :bordered="bordered"
        :hover="hover"
        :size="size"
        :max-height="maxHeight"
        :table-layout="tableLayout ? 'auto' : 'fixed'"
        :showHeader="showHeader"
        cellEmptyContent="-"
        resizable
      >
        <template #title-slot-option></template>
        <template #product_thumb="{row}">
          <t-image-viewer v-if="row.product_thumb" :images="[row.product_thumb]" :closeOnEscKeydown="false">
            <template #trigger="{ open }">
              <div class="tdesign-demo-image-viewer__ui-image" @click="open">
                <p class="prod-img">
                  <img alt="test" :src="row.product_thumb"/>
                </p>
                <div class="tdesign-demo-image-viewer__ui-image--hover">
                  <span><browse-icon size="1.4em"/></span>
                </div>
              </div>
            </template>
          </t-image-viewer>
          <p v-else class="no-img"></p>
        </template>
        <template #product_title="{row}">
          <div class="">
            <p class="item-title">{{ row.product_title }}</p>
            <p v-if="row.sn" class="item-sn">S/N:{{ row.sn }}</p>
          </div>
        </template>
        <template #relation="{row}">
          <div v-if="row.relation && row.relation.length" class="relation">
            <p v-for="(item, index) in row.relation" :key="index">
              <span>{{ item.product_title }} </span>
              <span class="pl16">￥{{ item.product_price }}</span>
            </p>
          </div>
          <p v-else>-</p>
        </template>
      </t-table>

      <div class="flex align-center justify-end">
        <div class="pt24">
          <div class="total-price">
            <p class="total-title">合计</p>
            <p class="total-hint">(含运费)：</p>
            <p class="total-price"><span class="price-symbol">￥</span>{{ info.pay_produce }}</p>
          </div>
          <div class="flex align-center justify-end">
            <p class="total-title">支付定金：</p>
            <p class="pay-price"><span>￥</span>{{ info.deposit_fee }}</p>
          </div>
        </div>
      </div>
    </t-card>
  </div>
</template>

<script lang="jsx">
import { MessagePlugin, EnhancedTable, Loading } from 'tdesign-vue';
import { IconFont, BrowseIcon } from "tdesign-icons-vue";

export default {
  name: 'OrderInfo',
  props: {
    info: Object
  },
  components: { IconFont, BrowseIcon },
  data() {
    return {
      lists: [],
      size: 'medium',
      tableLayout: false,
      stripe: false,
      bordered: false,
      hover: true,
      showHeader: true,
      columns: [
        {colKey: 'product_id', title: 'ID', width: 80,},
        {colKey: 'product_thumb', title: '图片', align: 'center', width: 160,},
        {colKey: 'product_title', title: '产品', ellipsis: true},
        {colKey: 'relation', title: '附加产品', width: 260},
        {colKey: 'quantity', title: '数量', width: 260},
        {colKey: 'product_price', title: '产品金额', width: 260},
        {colKey: 'total_price', title: '合计金额', width: 260},
      ],

      expandedTreeNodes: ['申请人 2_1 号', '申请人 30_1 号', '申请人 4_1 号'],
      maxHeight: 395,
    }
  },
  computed: {
    // 可以使用同名插槽代替渲染函数：<template #treeExpandAndFoldIcon><icon /></template>
    treeExpandIcon() {
      // 自定义展开图标
        return this.treeExpandAndFoldIconRender;
    },
  },
  methods: {
    // eslint-disable-next-line
    treeExpandAndFoldIconRender(h, { type, row }) {
      return type === 'expand' ? <ChevronRightIcon /> : <ChevronDownIcon />;
    },

    onExpandedTreeNodesChange(expandedTreeNodes, context) {
      if (!context.rowState) return;
      //this.onTreeExpandChange(context);
    },
    onTreeExpandChange(context) {
      console.log(context.rowState.expanded ? '展开' : '收起', context);
      /**
       * 如果是懒加载，请确认自己完成了以下几个步骤
       * 1. 提前设置 children 值为 true；
       * 2. 在 onTreeExpandChange 事件中处理异步数据；
       * 3. 自定义展开图标渲染 lazyLoadingTreeIconRender
       */
      if (context.row.list === true) {
        this.lazyLoadingData = context.row;
        const timer = setTimeout(() => {
          this.appendMultipleDataTo(context.row);
          this.lazyLoadingData = null;
          clearTimeout(timer);
        }, 200);
      }
    },

  }
}
</script>

<style lang="less" scoped>
  .order-info {

    .relation {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .total-price {
      display: flex;
      align-items: center;

      .total-hint {
        font-size: 13px;
        color: rgba(0,0,0,0.4);
      }

      .total-price {
        font-size: 16px;
        font-weight: 600;
      }

      .price-symbol {
        font-size: 11px;
        color: rgba(0,0,0,0.9);
      }
    }

    .total-title {
      font-size: 14px;
    }

    .pay-price {
      font-size: 16px;
      font-weight: 600;
      color: #FF754C;

      span {
        font-size: 11px;
      }
    }
  }
</style>
